<template>
	<view class="app">
		<view class="input">
			<view>
				<label>输入列：</label>
				<input type="text" v-model="column" placeholder="输入列数"/>
			</view>
			<view>
				<label>输入行：</label>
				<input type="text" v-model="row" placeholder="输入行数"/>
			</view>
		</view>
		<view class="box" :style="{width:`${boxW}rpx`}">
			<view class="box-item" v-for="(item,index) in tatteList" :key="index" :style="{width: `${boxW / column}rpx`,height: `${boxW / column}rpx`}">
				<view class="item" :style="{background:`url(${imgUrl}) no-repeat -${item.maxX}rpx -${item.maxY}rpx / ${item.maxRowW}rpx ${item.maxRowH}rpx`}"></view>
			</view>
		</view>
		
		<BottomTips txt="场景引用!"/>
		<view style="height: 20rpx;"></view>
		<navigator url="/pages/activity/puzzle/index-1" hover-class="navigator-hover">
			<button size="mini" type="primary" @click="setItemPosition">跳转试玩拼图游戏</button>
		</navigator>
	</view>
</template>

<script>
	import BottomTips from '@/components/bottom-tips.vue'
	export default{
		components:{BottomTips},
		data(){
			return {
				boxW: 700,       	// 默认图片的宽
				column:4,					// 图片多少列 等分的列数
				row:4,						// 图片的行数
				imgUrl: 'https://zb-tes.oss-cn-shenzhen.aliyuncs.com/platform/lottery_activity/lottery_award_img/fea12a9223344eac8ec45d892e8665af.jpg',				// 需要分割的图片
				tatteList:[],			// 计算好碎片的数组
 			}
		},
		mounted() {
			this.propertiesList()
		},
		watch:{
			column(){this.propertiesList()},
			row(){this.propertiesList()}
		},
		methods:{
			changeInput(e,type){
				type == 1?this.column = e.detail.value : this.row = e.detail.value
				this.propertiesList()
			},
			btn(){
				
			},
			propertiesList(){
				// debugger
				var tatter = []
				for(let i=0; i<this.column * this.row; i++){
					let absX = tatter.length % this.column						                    								// x轴坐标
					let absY = Math.floor(tatter.length / this.column)			                    					// y轴坐标

					let maxX = (absX * Math.floor(this.boxW / this.column))							                    										// 碎片x轴定位
					let maxY = (absY * Math.floor(this.boxW / this.column))									        														// 碎片y轴定位
					let maxRowW = (this.column * Math.floor(this.boxW / this.column))								    												// 碎片的宽
					let maxRowH = (Math.ceil(this.column * this.row / this.column) * Math.floor(this.boxW / this.column))				// 碎片的高

					tatter.push({
							maxRowW,
							maxRowH,
							absX,
							absY,
							maxX,
							maxY,
					})
				}
				this.tatteList = tatter
			}
		}
	}
</script>

<style lang="scss" scoped>
	.app{display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: calc(100vh - 44px);
		.input{display: flex;width: 700rpx;margin-bottom: 40rpx;border-bottom: 1px solid #eee;
			label{font-size: 32rpx;color: #666;}
			input{font-size: 32rpx;color: #333;height: 64rpx;}
		}
		.box{display: flex;justify-content: space-between;flex-wrap: wrap;border-radius: 10rpx;overflow: hidden;
			.box-item{padding: 1rpx;box-sizing: border-box;display: flex;
				.item{flex: 1;border-radius: 8rpx;overflow: hidden;}
			}
		}
	}
</style>